<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title></title>
</head>
<body onload="init()">
<canvas id="mainCanvas" width="400px" height="300px"></canvas>
<script src="//cdn.bootcss.com/three.js/r83/three.min.js"></script>
<script src="../lib/stats.js/build/stats.min.js"></script>
<script src="../lib/OBJLoader.js"></script>

<script type="text/javascript">
     var scene = null;
            var camera = null;
            var renderer = null;
            
            var mesh = null;
            var id = null;
            
            function init() {
                //绑定元素
                renderer = new THREE.WebGLRenderer({
                    canvas: document.getElementById('mainCanvas')
                });
                renderer.setClearColor(0x000000);
                
                //实例化场景
                scene = new THREE.Scene();
                //实例化照相机 加到场景中
                camera = new THREE.OrthographicCamera(-5, 5, 3.75, -3.75, 0.1, 100);
                camera.position.set(15, 25, 25);
                camera.lookAt(new THREE.Vector3(0, 2, 0));
                scene.add(camera);
                //加载模型文件
                var loader = new THREE.OBJLoader();
                // 参数 1，文件路径；2回调函数，将导入的模型添加到场景中去
                loader.load('../lib/port.obj', function(obj) {
                    obj.traverse(function(child) {
                        if (child instanceof THREE.Mesh) {
                            child.material.side = THREE.DoubleSide;   //正反双面绘制  
                        }
                    });
                    mesh = obj;   //将加载的模型加到变量中去
                    scene.add(obj); 
                });
                //绘制光照 添加到场景中
                var light = new THREE.DirectionalLight(0xffffff);
                light.position.set(20, 10, 5);
                scene.add(light);
                
                id = setInterval(draw, 20);
            }
            
            function draw() {
                renderer.render(scene, camera);
                mesh.rotation.y += 0.01;   //绘制缩放
                if (mesh.rotation.y > Math.PI * 2) {
                    mesh.rotation.y -= Math.PI * 2;
                }
            }
</script>
</body>

</html>